<template>
	<view style="padding: 30rpx;">
		<navigator url="/pages/logpage/logpage"><button>打印日志</button></navigator>
		<navigator url="/pages/tabBar/api/timepage/timepage"><button>计时器</button></navigator>
		<navigator url="/pages/tabBar/api/api/storage/storage"><button>数据缓存</button></navigator>
	</view>
	<view class="function-area">
				<!-- 选择图片功能 -->
				<view class="function-section">
					<text class="section-title">选择图片功能</text>
					<button @tap="chooseImage" class="function-btn">选择图片</button>
					<view v-if="selectedImage" class="image-preview">
						<image :src="selectedImage" class="preview-image" mode="aspectFit" @tap="previewImage"></image>
						<text class="image-tip">点击图片预览</text>
					</view>
				</view>
	
				<!-- 天气预报功能 -->
				<view class="function-section">
					<text class="section-title">天气预报</text>
					<button @tap="getWeather" class="function-btn">获取天气预报</button>
					<view v-if="weatherData" class="weather-info">
						<text class="weather-item">日期: {{ weatherData.date }}</text>
						<text class="weather-item">星期: {{ weatherData.week }}</text>
						<text class="weather-item">最高温: {{ weatherData.high }}℃</text>
						<text class="weather-item">最低温: {{ weatherData.low }}℃</text>
					</view>
				</view>
	
				<!-- 下载图片功能 -->
				<view class="function-section">
					<text class="section-title">下载网络图片</text>
					<button @tap="downloadImage" class="function-btn">下载图片</button>
					<view v-if="downloadedImage" class="download-result">
						<image :src="downloadedImage" class="downloaded-image" mode="aspectFit"></image>
						<text class="progress-text">下载进度: {{ downloadProgress }}%</text>
					</view>
				</view>
			</view>
</template>

<script>
	import cardviewtext from '@/components/cardviewtext.vue'
	import data from '@/data/new.json'
	export default {
		components: {
			cardviewtext
		},
		onLoad() {
			const da = data.contentList;
			console.log("Page onLoad  " + JSON.stringify(da));
		},
		data() {
			return {selectedImage: '', // 选择的图片
				weatherData: null, // 天气预报数据
				downloadedImage: '', // 下载的图片
				downloadProgress: 0,
				contentList: [

					{
						id: 0,
						type: 'news',
						title: "2020，我们温暖的记忆",
						isTop: true,
						source: "新闻联播",
						comments: 405,
						date: "2025.10.15",
						hasImage: false
					},
					{
						id: 1,
						type: 'news',
						title: "森林大县57年无大火是怎么做到的",
						isTop: true,
						source: "光明网",
						comments: 234,
						date: "2025.10.16",
						hasImage: false
					},

					{
						id: 2,
						type: 'news',
						title: "14个月从100家开到1000家门店，蜜雪冰城为何买下这家精酿啤酒商",
						isTop: false,
						source: "界面新闻",
						comments: 56,
						date: "2025.10.07",
						hasImage: true,
						imageUrl: "city3.jpg"
					},
					{
						id: 3,
						type: 'news',
						title: "把握历史大势 共创美好未来(观沧海)",
						isTop: false,
						source: "人民日报",
						comments: 1025,
						date: "2025.10.25",
						hasImage: true,
						imageUrl: "city1.png"
					},
					{
						id: 4,
						type: 'news',
						title: "黄金还能走多远?卖方高呼'第三浪启动'，230多份研报看多",
						isTop: false,
						source: "财联社",
						sslot: true,
						comments: 452,
						date: "2025.10.08",
						hasImage: true,
						imageUrl: "city2.jpg"
					},
					// 插入广告
					{
						id: 5,
						type: 'ad',
						title: "加微信交友群，喜欢就聊，找喜欢的人",
						source: "广告 我主良缘文化",
						images: ["city4.jpg", "city5.jpg", "city3.jpg"]
					},
					{
						id: 6,
						type: 'news',
						title: "'没有短板'的完美战鹰!歼-16机库独家探访",
						isTop: false,
						source: "红星新闻",
						comments: 56,
						date: "2025.10.07",
						hasImage: true,
						imageUrl: "city1.png"
					},
					{
						id: 7,
						type: 'news',
						title: "多国学者共探巴克特里亚考古 携手推进丝绸之路文明研究新进程",
						isTop: false,
						source: "中国日报网",
						comments: 56,
						date: "2025.10.12",
						hasImage: true,
						imageUrl: "city2.jpg"
					}
				]
			}
		},
		methods: {
					getImageUrl(filename) {
						return `/static/${filename}`;
					},
		
			
		
					// 获取天气预报
					getWeather() {
						
		
						uni.request({
							url: 'http://t.weather.sojson.com/api/weather/city/101230501',
							success: (res) => {
								uni.hideLoading();
								if (res.data.status === 200) {
									// 获取明天的天气预报
									const tomorrow = res.data.data.forecast[1];
									this.weatherData = {
										date: tomorrow.ymd,
										week: tomorrow.week,
										high: tomorrow.high.replace('高温 ', '').replace('℃', ''),
										low: tomorrow.low.replace('低温 ', '').replace('℃', '')
									};
									console.log('天气预报数据:', this.weatherData);
								} else {
									uni.showToast({
										title: '获取天气失败',
										icon: 'none'
									});
								}
							},
							fail: (error) => {
								uni.hideLoading();
								console.error('请求天气失败:', error);
								uni.showToast({
									title: '网络请求失败',
									icon: 'none'
								});
							}
						});
					},
		
					// 3. 下载图片功能
					downloadImage() {
						this.downloadProgress = 0;
						const imageUrl = 'https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg';
		
						const downloadTask = uni.downloadFile({
							url: imageUrl,
							success: (res) => {
								if (res.statusCode === 200) {
									this.downloadedImage = res.tempFilePath;
									console.log('图片下载成功:', res.tempFilePath);
									
								}
							},
							fail: (error) => {
								console.error('下载失败:', error);
								uni.showToast({
									title: '下载失败',
									icon: 'none'
								});
							}
						});
		
						// 监听下载进度
						downloadTask.onProgressUpdate((res) => {
							this.downloadProgress = res.progress;
							console.log('下载进度:', res.progress + '%');
						});
					}
				},
		onLoad() {
			console.log('页面加载完成');
		}
	}
</script>

<style>

</style>